<template>
    <div>
       <el-dialog
            title="题目预览"
            :visible="showDialog"
            width="50%"
            @close="closeBtn">
        <el-form ref="ref" >
            <el-form-item>
                <el-col :span="6">【题型】：{{detailList.questionType | questionType}}</el-col>
                <el-col :span="6">【编号】：{{detailList.id}}</el-col>
                <el-col :span="6">【难度】：{{detailList.difficulty | difficulty}}</el-col>
                <el-col :span="6">【标签】：{{detailList.tags}}</el-col>
            </el-form-item>
            <el-form-item>
            <el-col :span="6">【学科】：{{detailList.subjectName}}</el-col>
            <el-col :span="6">【目录】：{{detailList.directoryName}}</el-col>
            <el-col :span="6">【方向】：{{detailList.direction}}</el-col>
            </el-form-item>
            <hr>
            <el-form-item>
                <span :span="4">【题干】：</span>
                <a href="" style="color:blue">{{detailList.question | html2Text}}</a>
                </el-form-item>
                <el-form-item v-show="detailList.questionType !== '3'" >
                <el-row>
                    <el-col>选项 ： 选择正确答案</el-col>
                </el-row>
                <el-row>
                    <el-col v-for="item in detailList.options" :key="item.id" >
                    <el-checkbox :checked="(item.isRight=='1')" >{{item.code}}:{{item.title}}</el-checkbox>
                    </el-col>
                </el-row>
            </el-form-item>
            <hr>
            <el-form-item>
            <el-row>
                 <el-col :span="12">【参考答案】：
                    <el-button type="danger" size="small" @click="videoState = !videoState">视频答案预览</el-button>

                    <div class="videomasks" v-if="videoState == true">
                        <video :src="detailList.videoURL" controls="controls" autoplay width="100%" height="100%">
                        您的浏览器不支持 video 标签。
                        </video>
                    </div>
                    </el-col>
                </el-row>
            </el-form-item>
            <hr>
            <el-form-item>
                <span>【答案解析】：{{detailList.answer | html2Text}}</span>
            </el-form-item>
            <hr>
            <el-form-item>
                <span>【题目备注】：{{detailList.remarks}}</span>
            </el-form-item>
        </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="closeBtn">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { questionType, difficulty } from '../../api/hmmm/constants'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    detailList: {
      type: Object
    }
  },
  data () {
    return {
      videoState: false,
      videourl: ''
    }
  },
  //   过滤器
  //   函数里的参数 value 是需要过滤的值
  filters: {
    questionType: function (value) {
      const qType = questionType.find(item => item.value === Number(value))
      return qType ? qType.label : ''
    //   return value
    },
    difficulty: function (value) {
      const dType = difficulty.find(item => item.value === Number(value))
      return dType ? dType.label : ''
    }
  },
  methods: {
    closeBtn () {
    //   console.log(1111)
      this.$refs.ref = ''
      this.$emit('update:showDialog', false)
    }
  }

}
</script>

<style lang="less" scoped>

</style>
